<template>
	<view :style="[BtnStyle]">
		<!-- 加载动画 -->
		<view v-show="loading" class="loading">
			<se-icon class="loadingIcon" type="fas fa-spinner fa-pulse" :size="iconSize" color="#808695"></se-icon>
		</view>
		<!-- 图标 -->
		<view v-if="icon != ''" class="loading">
			<se-icon class="loadingIcon" :type="icon" :size="iconSize" color="#808695"></se-icon>
		</view>
		<!-- 文字 -->
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props:{
			// 颜色
			color:{
				type:String,
				default: '#2DB7F5'
			},
			// 尺寸 large、small、default
			size:{
				type:String,
				default: 'default'
			},
			// 类型 default、success、warning、error
			type:{
				type:String,
				default: 'default'
			},
			// 按钮形状，可选值为circle或者不设置
			shape:{
				type:String,
				default: 'default'
			},
			// 设置按钮为加载中状态
			loading:{
				type:Boolean,
				default: false
			},
			// 设置按钮的图标类型
			icon:{
				type:String,
				default: ''
			},
		},
		data() {
			return {
				iconSize: 34,
			}
		},
		created() {
		},
		mounted() {

		},
		computed:{
			// 按钮样式
			BtnStyle(){
				let style = {}
				
				style.color = "#ffffff"
				style.textAlign = "center"
				style.padding = '15rpx'
				// 按钮的形状
				this.shape == "circle" ? style.borderRadius='10rpx' : style.borderRadius='0rpx' ;
				if(this.size == "small"){
					style.width = '20%'
					style.fontSize = '16rpx'
					this.iconSize = 10
				}else if(this.size == 'default'){
					style.width = '50%'
					style.fontSize = '20rpx'
					this.iconSize = 28
				}else if(this.size == 'large'){
					style.width = '100%'
					style.fontSize = '26rpx'
					this.iconSize = 32
				}
				// 按钮的类型
				// 类型 default、success、warning、error
				if(this.type == 'default'){
					style.backgroundColor = this.color
				}else if(this.type == 'success'){
					style.backgroundColor = '#19BE6B'
				}else if(this.type == 'warning'){
					style.backgroundColor = '#FF9900'
				}else if(this.type == 'error'){
					style.backgroundColor = '#ED4014'
				}
				return style
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.loading{
		display: inline-block;
	}
	.loadingIcon{
		margin-right: 10rpx;
	}
</style>
